<template>
    <div class="all">
        <div class="titleStyle">
            集装箱(器)信息
        </div>
        <div class="bodyStyle">
            <div style="width: 100%;">
                <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px" label-position="top">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="集装箱(器)编号信息" prop="numInfor" class="formStyle">
                                <el-input placeholder=" " clearable v-model="addForm.numInfor"
                                    size="mini"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="集装箱(器)尺寸和类型" prop="sizeType" class="formStyle">
                                <el-select v-model="addForm.sizeType" placeholder="请选择" clearable
                                    style="width: 100%;">
                                    <el-option label="尺寸" value="尺寸"></el-option>
                                    <el-option label="类型" value="类型"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="重箱或者空箱标识代码" prop="weigthEmptyCode" class="formStyle">
                                <el-select v-model="addForm.weigthEmptyCode" placeholder="请选择" clearable
                                    style="width: 100%;">
                                    <el-option label="BSIU2668892" value="BSIU2668892"></el-option>
                                    <el-option label="SEGU3441288" value="SEGU3441288"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="footerStyle">
            <!-- <el-button size="mini">取 消</el-button> -->
            <el-button type="primary" size="mini" class="buttonStyle" @click="onSubmit">保 存</el-button>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {
        title: {
            type: String,
            default: ""
        },
        currentRow: {
            type: Object,
            default: {}
        },
        closePage: {
            type: Function,
        },
    },
    data() {
        return {
            addForm: {
                numInfor: "",
                sizeType: "",
                weigthEmptyCode: "",
            },
            rules: {
                numInfor: [
                    { required: true, message: '请输入集装箱(器)编号信息', trigger: 'change,blur' },
                ],
                sizeType: [
                    { required: true, message: '请选择集装箱(器)尺寸和类型', trigger: 'change,blur' },
                ],
                weigthEmptyCode: [
                    { required: true, message: '请选择重箱或者空箱标识代码', trigger: 'change,blur' },
                ],
            },
        }
    },
    mounted() {
        if (this.title == '编辑') {
            this.addForm = { ...this.currentRow }
        }
    },
    methods: {
        onSubmit() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    let item = { ...this.addForm }
                    let type = this.title
                    this.closePage(type, item)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
    },
}
</script>
<style lang='scss' scoped>
.all {
    .titleStyle {
        position: relative;
        top: -38px;
        font-size: 16px;
        color: #333333;
    }

    .bodyStyle {
        margin-top: -2%;

        .formStyle {
            // margin-right: 50px;
            width: 80%;

            :deep .el-input__inner {
                border-top: none;
                border-left: none;
                border-right: none;
                border-radius: 0;
                // padding: 0;
            }
        }

        .dateStyle {
            :deep .el-input__inner {
                border-top: none;
                border-left: none;
                border-right: none;
                border-radius: 0;
                width: 80%;
                height: 30px;
            }
        }

        :deep .el-form-item__label {
            color: #333333;
        }
    }

    .footerStyle {
        display: flex;
        justify-content: space-around;

        .buttonStyle {
            background-color: #0F47B8;
        }
    }
}
</style>